import React from 'react';
import { Table, Button } from 'antd';

const dataSource = [
  {
    key: '1',
    name: '熊大',
    age: 32,
    address: '力宝大厦1楼',
  },
  {
    key: '2',
    name: '勇哥',
    age: 42,
    address: '力宝大厦100楼',
  },
  {
    key: '3',
    name: '永哥',
    age: 50,
    address: '力宝大厦1000楼',
  },
  {
    key: '4',
    name: '幸哥',
    age: 50,
    address: '力宝大厦10000楼',
  },
  {
    key: '5',
    name: '旭哥',
    age: 50,
    address: '力宝大厦100000楼',
  },
];

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];

/**
 * @name: formatJson
 * @Date: 2019-12-25 23:17:11
 * @LastEditors: xishanxu
 * @param {string[]} [filterVal] // 对应数据中的每一个字段
 * @param {object[]} [jsonData] // 原始数据 JSON格式的
 * @returns: 猜一下
 */
function formatJson(filterVal: string[], jsonData: object[]) {
  return jsonData.map(v => filterVal.map(j => v[j]));
  // 你绝不会懂的
  // return jsonData.map(v =>
  //   filterVal.map(j => {
  //     if (j === "timestamp") { // timestamp 暂时不需要
  //       return parseTime(v[j]);
  //     } else {
  //       return v[j];
  //     }
  //   })
  // );
}

const handlerExcleDownload = () => {
  import('../../../utils/ExcleTools').then(excel => {
    const tHeader: string[] = ['名字', '年纪', '地址'];
    const filterVal: string[] = ['name', 'age', 'address']; // 等后端字段
    const data = formatJson(filterVal, dataSource);

    excel.export_json_to_excel({
      header: tHeader,
      data,
      filename: '表格的名字',
    });
  });
};

const HomeManager = () => (
  <div>
    <Table dataSource={dataSource} columns={columns} />;
    <Button type="danger" onClick={handlerExcleDownload}>
      导出Excel
    </Button>
  </div>
);

export default HomeManager;
